<template>
	<uni-popup ref="popup" type="top" background-color="#fff" @maskClick="closeFun">
		<uv-navbar :leftIconSize="0" bgColor="transparent" placeholder></uv-navbar>
		<view class="px-30 text-32 pt-20 pb-40">
			<slider :value="_thisvalue" block-color="#1abc9c" activeColor="#1abc9c" block-size="15" @change="sliderChange" step="50" />
			<view class="flex">
				<view class="py-10 flex-1 px-20 text-30" @click="change(44, 0)">大</view>
				<view class="py-10 flex-1 text-center px-20 text-30" @click="change(36, 50)">中</view>
				<view class="py-10 flex-1 text-right px-20 text-30" @click="change(28, 100)">小</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import {watch, ref} from 'vue'
const props = defineProps({
	modelValue: Boolean
})

const emit = defineEmits(['update:modelValue', 'callback'])

const popup = ref()

const _thisvalue = ref(50)

watch(() => props.modelValue,(newVal, oldVal) => {
	if(newVal){
		popup.value.open()
	} else{
		popup.value && popup.value.close()
	}
}, { immediate: true, deep: true})

const closeFun = () => {
	emit("update:modelValue")
}

const sliderChange = (data) => {
	console.log(data)
	if(data.detail.value === 100){
		change(28, 100)
	} else if(data.detail.value === 50){
		change(36, 50)
	} else{
		change(44, 0)
	}
}

const change = (data,inits) => {
	_thisvalue.value = inits
	emit('callback', data)
	emit("update:modelValue")
}
</script>

<style>
</style>